    /****************** 总容器 ******************/
   .wrapper{
    width: 100%;
    height: 100%;
 }
   /****************** header ******************/
   .wrapper header{
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    
    display: flex;
    align-items: center;  
 }
 /* flex弹性布局，水平方向上是居左，垂直方向上是居中的 */
   .wrapper header .icon-location-box{
      width: 3.5vw;
      height: 3.5vw;
      margin: 0 1vw 0 3vw;
   }
   .wrapper header .location-text{
      font-size: 4.5vw;
      font-weight: 700;
      color: #fff;
   }
   .wrapper header .location-text .fa-caret-down{
      margin-left: 1vw;
 }
 /****************** search ******************/
  .wrapper .search{
     width: 100%;
     height: 13vw;
  }
  .wrapper .search .search-fixed-top{
     width: 100%;
     height: 13vw;
     background-color: #0097FF;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .wrapper .search .search-fixed-top .search-box{
     width: 90%;
     height: 9vw;
     background-color: #fff;
     border-radius: 2px;
     
     display: flex;
     justify-content: center;
     align-items: center;/* 搜索框内的文字也是居中的 */
     font-size: 3.5vw;
     color: #AEAEAE;
     font-family: "宋体";
     user-select: none;/*这句取消文本选中*/
  }
  .wrapper .search .search-fixed-top .search-box .fa-search{
     margin-right: 1vw;
  } /* 让小图标往右边部分顶一下 */
    /****************** 点餐分类部分 ******************/
     .wrapper .foodtype{
          width: 100%;
          height: 48vw;
        
        display: flex;
        flex-wrap: wrap;
		/* 改编为恻轴方向排列 */
		/* 弹性布局，水平排列，自动换行，居中 */
        justify-content: space-around;
        align-content: center;
		/*要使用align-content。10个子元素将自动换行为两行，而且两行作为一个整体垂直居中*/
     }
     .wrapper .foodtype li{
        /*一共10个子元素，调整尺寸，保证一排五个（16.7-20）*/
        width: 18vw;
        height: 20vw;
        
        display: flex;
        /*弹性盒子主轴方向设为column，然后仍然是垂直水平方向居中*/
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        user-select: none;
		/* 文字不被选中 */
        cursor: pointer;
     }
     .wrapper .foodtype li img{
         width: 10.3vw;
        height: 10.3vw;
     }
	 /* p标签做样式 */
     .wrapper .foodtype li p{
        font-size: 3.2vw;
        color: #666;
     }
    /****************** 横幅广告部分 ******************/
	  .wrapper .banner{
	     /**
	      * 设置容器宽度95%，然后水平居中，这样两边留白; 
	      * 这里不能用padding，因为背景图片也会覆盖padding
	      */
	     width: 95%;
		 /* 为了两边留白 */
	     margin: 0 auto;
	     height: 29vw;
	     
	     /*此三个样式组合，可以保证背景图片充满整个容器*/
	     background-image: url(../img/index_banner.png);
	     background-repeat: no-repeat;
	     background-size: cover;
	     /* 是背景图片自适应充满整个容器 ！！！*/
	     box-sizing: border-box;
		 /* 边框表示 */
	     padding: 2vw 6vw;
	  }
	  .wrapper .banner h3{
	     font-size: 4.2vw;
	     margin-bottom: 1.2vw;
	  }
	  .wrapper .banner p{
	     font-size: 3.4vw;
	     color: #666;
	     margin-bottom: 2.4vw;
	  }
	  .wrapper .banner a{
	     font-size: 3vw;
	     color: #C79060;
	     font-weight: 700;
	  }
	  /****************** 超级会员部分 ******************/
	   .wrapper .supermember{
	      /*这里也设置容器宽度95%，与上方对齐，不能用padding，因为背景色也会充满padding*/
	      width: 95%;
	      margin: 0 auto;
	      height: 11.5vw;
	      background-color: #FEEDC1;
	      margin-top: 1.3vw;
	      border-radius: 2px;
	      color: #644F1B;
	      
	      display: flex;
	      justify-content: space-between;
	      align-items: center;
	   }
	   /* 给左右两边做弹性布局 */
	   .wrapper .supermember .left{
	      display: flex;
	      align-items: center;
	      margin-left: 4vw;
	      user-select: none;
	   }
	   .wrapper .supermember .left img{
	      width: 6vw;
	      height: 6vw;
	      margin-right: 2vw;
	   }
	   .wrapper .supermember .left h3{
	      font-size: 4vw;
	      margin-right: 2vw;
	   }
	   .wrapper .supermember .left p{
	      font-size: 3vw;
	   }
	   .wrapper .supermember .right{
	      font-size: 3vw;
	      margin-right: 4vw;
	      cursor: pointer;
	   }
	   /* 这里的“立即开通”是可以点击的 */
	   
	   /****************** 推荐商家部分 ******************/
	    .wrapper .recommend{
	       width: 100%;
	       height: 14vw;
	       display: flex;
	       justify-content: center;
	       align-items: center;
	    }
	    .wrapper .recommend .recommend-line{
	       width: 6vw;
	       height: 0.2vw;
	       background-color: #888;
		   /* 线是灰色的 */
	    }
	    .wrapper .recommend p{
	       font-size: 4vw;
	       margin: 0 4vw;
		   /* 文字 左右*/
	    }
		/****************** 推荐方式部分 ******************/
		 .wrapper .recommendtype{
		    width: 100%;
		    height: 5vw;
		    margin-bottom: 5vw;
		    
		    display: flex;
		    justify-content: space-around;
			/* 水平对其不是仅靠两边 */
		    align-items: center;
		 }
		 .wrapper .recommendtype li{
		    font-size: 3.5vw;
		    color: #555;
		 }
        /****************** 推荐商家列表部分 ******************/
  .wrapper .business{
        	width: 100%;
        	padding-bottom: 14vw;
        }
 .wrapper .business li{
    width: 100%;
    box-sizing: border-box;
    padding: 2.5vw;
    user-select: none;
    border-bottom: solid 1px #DDD;
    
    display: flex;
 }
 .wrapper .business li img{
    width: 18vw;
    height: 18vw;
 }
 .wrapper .business li .business-info{
    width: 100%;
    box-sizing: border-box;
    padding-left: 3vw;
 }
 .wrapper .business li .business-info .business-info-h{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;
 }
 .wrapper .business li .business-info .business-info-h h3{
    font-size: 4vw;
    color: #333;
 }
 .wrapper .business li .business-info .business-info-h .business-info-like{
    width: 1.6vw;
    height: 3.4vw;
    background-color: #666;
    color: #fff;
    font-size: 4vw;
    margin-right: 4vw;
    
    display: flex;
    justify-content: center;
    align-items: center;
 }
 .wrapper .business li .business-info .business-info-star{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;
    font-size: 3.1vw;
 }
 .wrapper .business li .business-info .business-info-star .business-info-star-left{
    display: flex;
    align-items: center;
 }
 .wrapper .business li .business-info .business-info-star .business-info-star-left .fa-star{
    color: #FEC80E;
    margin-right: 0.5vw;
 }
 .wrapper .business li .business-info .business-info-star .business-info-star-left p{
    color: #666;
    margin-left: 1vw;
 }
 .wrapper .business li .business-info .business-info-star .business-info-star-right{
    background-color: #0097FF;
    color: #fff;
    font-size: 2.4vw;
    border-radius: 2px;
    padding: 0 0.6vw;
 }
 .wrapper .business li .business-info .business-info-delivery{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;
    
    color: #666;
    font-size: 3.1vw;
 }
 .wrapper .business li .business-info .business-info-explain{
    display: flex;
    align-items: center;
    margin-bottom: 3vw;
 }
 .wrapper .business li .business-info .business-info-explain div{
    border: solid 1px #DDD;
    font-size: 2.8vw;
    color: #666;
    border-radius: 3px;
    padding: 0 0.1vw ;
 }
 .wrapper .business li .business-info .business-info-promotion{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.8vw;
 }
 .wrapper .business li .business-info .business-info-promotion .business-info-promotion-left{
    display: flex;
    align-items: center;
 }
 .wrapper .business li .business-info .business-info-promotion .business-info-promotion-left 
.business-info-promotion-left-incon{
    width: 4vw;
    height: 4vw;
    background-color: #70BC46;
    border-radius: 3px;
    font-size: 3vw;
    color: #fff;
    
    display: flex;
    justify-content: center;
    align-items: center;
 }
 .wrapper .business li .business-info .business-info-promotion .business-info-promotion-left p{
    color: #666;
    font-size: 3vw;
    margin-left: 2vw;
 }
 .wrapper .business li .business-info .business-info-promotion .business-info-promotion-right{
    display: flex;
    align-items: center;
    font-size: 2.5vw;
    color: #999;
 }
 .wrapper .business li .business-info .business-info-promotion .business-info-promotion-right p{
    margin-right: 2vw;
 }
 /****************** 底部菜单部分 ******************/
  .wrapper .footer{
     width: 100%;
     height: 14vw;
     border-top: solid 1px #DDD;
     background-color: #fff;
     
     position: fixed;
     left: 0;
     bottom: 0;
     /* 固定在底部 */
     display: flex;
     justify-content: space-around;
     align-items: center;
  }
   .wrapper .footer li{
    /*li本身的尺寸完全由内容撑起*/
      display: flex;
      flex-direction: column;
	  /* 设置主轴负方向为恻轴*/
      justify-content: center;
      align-items: center;
    
      color: #999;
      user-select: none;
      cursor: pointer;
 }
 .wrapper .footer li p{
    font-size: 2.8vw;
 }
 .wrapper .footer li i{
    font-size: 5vw;
 }
